<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="/src/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/src/css/main.css">
    <link rel="stylesheet" type="text/css" href="/src/css/materialConfirm.css">
    <link rel="stylesheet" type="text/css" href="/src/font_937327_r18sptk9ohi/iconfont.css">

</head>

<body>
    <div id="materialConfirmVue" class="wrapper">
        <embed class="embed-wrapper" src="../top.html" />
        <div class="content-wrapper">
            <ol class="breadcrumb">
                <li>
                    <a>面料</a>
                    <a>/</a>
                    <a>面料选择</a>
                    <a>/</a>
                    <a class="active">面料详情</a>
                </li>
            </ol>
            <div class="selected-list">
                <strong>已选类目：</strong>
                <span v-for="(item,id) in choosedList" :id="item.id" class="label label-default">{{item.text}}</span>
            </div>
            <div style="position: relative;width: 100%;margin-top: 20px;">
                <ul class="nav nav-tabs">
                    <li role="presentation" class="tab active">
                        <a href="#dsl">大身料</a>
                    </li>
                    <li role="presentation" class="tab ">
                        <a href="#pjl">拼接料</a>
                    </li>
                    <li role="presentation" class="tab">
                        <a href="#ll">里料</a>
                    </li>
                </ul>
                <div class=" tab-pane active" id="bgbl">
                    <div class="tab-pane active" id="dsl">
                        <!-- 选择条件 -->
                        <ul class="list-group">
                            <li class="list-group-item">
                                <span class="list-group-name">颜色：</span>
                                <ul class="item-group">
                                    <li>红色</li>
                                    <li>黄色</li>
                                    <li>蓝色</li>
                                    <li>白色</li>
                                </ul>
                            </li>
                            <li class="list-group-item">
                                <span class="list-group-name">是否定做：</span>
                                <ul class="item-group">
                                    <li>定做</li>
                                    <li>不定做</li>
                                </ul>
                            </li>
                            <li class="list-group-item">
                                <span class="list-group-name">纱织：</span>
                                <ul class="item-group">
                                    <li>红色</li>
                                    <li>黄色</li>
                                    <li>蓝色</li>
                                    <li>白色</li>
                                </ul>
                            </li>
                            <li class="list-group-item">
                                <span class="list-group-name">适用季节：</span>
                                <ul class="item-group">
                                    <li>春</li>
                                    <li>夏</li>
                                    <li>秋</li>
                                    <li>冬</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="list-wrap">
                    <ul class="row">
                        <li v-for="(item,index) in materialInfoList" :data-index="item.id" class="col-md-3 list-item"
                            :title="item.chooseMsg" @click='showDetial(item.type)'>

                            <a href="#" class="thumbnail">
                                <img src="/src/images/niukou.jpg" alt="点击">
                            </a>
                            <p>
                                {{item.title}}
                            </p>
                        </li>
                    </ul>
                </div>
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="slected-wuxl">
                <strong>已选择的物料项目和服务：</strong>
                <div class="selected-item-show">
                    <span v-for="(item,index) in selectedTabList" :id="item.id"
                        class="label label-default selected">{{item.text}}</span>
                </div>
            </div>
            <div class="action-btn">
                <!-- 确认 弹出模态窗 -->
                <button class="btn btn-success" type="button" data-toggle="modal" data-target="#myModal">保存到订货单</button>
            </div>
        </div>




        <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
            <div class="modal-wrapper container">
                <div class="row title">
                    <h4>请确认你选择的物料和项目</h4>
                </div>
                <div slot="content">
                    <table border="1">
                        <tr>
                            <th colspan="2">面料</th>
                            <th>纱支</th>
                            <th>密度</th>
                            <th>组织</th>
                            <th>品名</th>
                            <th>门幅</th>
                            <th>颜色花型</th>
                            <th>后整</th>
                            <th>克重</th>
                            <th>数量（米）</th>
                        </tr>
                        <tr>

                            <td>T/C80/20</td>
                            <td>涤棉</td>
                            <td>45*45</td>
                            <td>110*76</td>
                            <td>1/1</td>
                            <td>细布</td>
                            <td>58/95*</td>
                            <td>本白</td>
                            <td>柔软</td>
                            <td>98 g/㎡</td>
                            <td>20393</td>
                        </tr>


                    </table>
                    <table border="1">
                        <tr>
                            <th colspan="2">辅料</th>
                            <th>纱支</th>
                            <th>密度</th>
                            <th>组织</th>
                            <th>品名</th>
                            <th>门幅</th>
                            <th>颜色花型</th>
                            <th>后整</th>
                            <th>克重</th>
                            <th>数量（米）</th>
                        </tr>
                        <tr>
                            <td>T/C80/20</td>
                            <td>涤棉</td>
                            <td>45*45</td>
                            <td>110*76</td>
                            <td>1/1</td>
                            <td>细布</td>
                            <td>58/95*</td>
                            <td>本白</td>
                            <td>柔软</td>
                            <td>98 g/㎡</td>
                            <td>20393</td>
                        </tr>


                    </table>
                    <table border="1">
                        <tr>
                            <th colspan="2">轻加工</th>
                            <th>纱支</th>
                            <th>密度</th>
                            <th>组织</th>
                            <th>品名</th>
                            <th>门幅</th>
                            <th>颜色花型</th>
                            <th>后整</th>
                            <th>克重</th>
                            <th>数量（米）</th>
                        </tr>
                        <tr>
                            <td>T/C80/20</td>
                            <td>涤棉</td>
                            <td>45*45</td>
                            <td>110*76</td>
                            <td>1/1</td>
                            <td>细布</td>
                            <td>58/95*</td>
                            <td>本白</td>
                            <td>柔软</td>
                            <td>98 g/㎡</td>
                            <td>20393</td>
                        </tr>
                    </table>
                </div>
                <div class="footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">返回修改</button>
                    <button type="button" class="btn btn-success" @click="goNext()">保存进入下一步</button>
                </div>
            </div>
        </div>
        <!-- 详情 模态窗 -->
        <div class="modal" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="infoModal">
            <div class="modal-wrapper container">
                <div class="cur-step">
                    <span>
                        <a href="">面料</a>>
                        <a href="">面料选择</a>
                    </span>
                </div>
                <div class="info-content">
                    <div class="inner-left">
                        <div class="bigPic" id="bigPic">
                            <img id='mainImg' src="/src/images/5c3dc53e2383b939a34cdb10f114a3e5.jpg">
                            <div class="slide-box" id="box"></div>
                        </div>

                        <!-- 小图列表-->
                        <div class="pic-list">
                            <ul>
                                <li>
                                    <a>
                                        <img src="/src/images/5c3dc53e2383b939a34cdb10f114a3e5.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a>
                                        <img src="/src/images/5c3dc53e2383b939a34cdb10f114a3e5.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a>
                                        <img src="/src/images/5c3dc53e2383b939a34cdb10f114a3e5.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a>
                                        <img src="/src/images/5c3dc53e2383b939a34cdb10f114a3e5.jpg">
                                    </a>
                                </li>
                                <li>
                                    <a>
                                        <img src="/src/images/5c3dc53e2383b939a34cdb10f114a3e5.jpg">
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="inner-right">
                        <div class="prod-id">
                            <span>产品代码：</span>
                            <span>302187</span>
                        </div>
                        <div class="prod-info">
                            <p>
                                <span>规格：</span>
                                <span>dsadsadasd</span>
                            </p>
                            <p>
                                <span>成分比例：</span>
                                <span>T80% &nbsp; C20%</span>
                            </p>
                            <ul>
                                <li>纱织：</li>
                                <li>门幅：</li>
                                <li>克重：</li>
                            </ul>
                            <ul>
                                <li>颜色：</li>
                                <li>番通色号：</li>
                                <li>整理工艺：</li>
                            </ul>
                        </div>
                        <div class="buy-pane">
                            <p>
                                <span>是否需要小样：</span>
                            </p>
                            <p>
                                <span>小样价格：</span>
                                <a class="xy-price">8.0</a>$
                            </p>

                        </div>
                        <!-- 需要填写尺寸的 -->
                        <div v-if="isType==1">
                            <span>尺寸：</span><input type="text" class="" placeholder="请输入尺寸">
                        </div>
                        <!-- 需要上传文件的 -->
                        <div v-if="isType==2">
                            上传文件： <input type="file">
                        </div>

                        <div class="opt-btns">
                            <button type="button" class="btn btn-info" @click="addChooseToParent()">添加到订货单</button>
                            <button type="button" class="btn btn-primary">购买小样</button>
                            <button type="button" class="btn btn-danger goPrevious" @click="closeInfo()">返回上一页</button>

                        </div>

                         <!-- 右侧放大图片 -->
                        <div class="enlargePane" id="enlargePane">
                            <img src="/src/images/5c3dc53e2383b939a34cdb10f114a3e5.jpg">
                        </div>
                        <div class="clearfix"></div>
                    </div>
                   
                </div>
                <div class="clearn"> </div>
                <!-- 详情 -->
                <div class="details-content">

                    <div class="cur-step">
                        <span>产品详情</span>
                    </div>
                    <div class="show-data">
                        <table border="1">
                            <tr>
                                <th>参数</th>
                                <td>数据</td>
                                <th>参数</th>
                                <td>数据</td>
                            </tr>
                            <tr>
                                <th>参数</th>
                                <td>数据</td>
                                <th>参数</th>
                                <td>数据</td>
                            </tr>
                            <tr>
                                <th>参数</th>
                                <td>数据</td>
                                <th>参数</th>
                                <td>数据</td>
                            </tr>
                            <tr>
                                <th>参数</th>
                                <td>数据</td>
                                <th>参数</th>
                                <td>数据</td>
                            </tr>
                        </table>
                    </div>
                    <!-- <div class="show-img">
                        <ul>
                            <li>
                                <img src="/src/images/5c3dc53e2383b939a34cdb10f114a3e5.jpg">
                            </li>
                            <li>
                                <img src="/src/images/5c3dc53e2383b939a34cdb10f114a3e5.jpg">
                            </li>
                            <li>
                                <img src="/src/images/5c3dc53e2383b939a34cdb10f114a3e5.jpg">
                            </li>
                        </ul>
                    </div> -->
                </div>
            </div>
        </div>
        <embed class="embed-wrapper" src="../footer.html">
    </div>
</body>

</html>
<script src="/src/js/jquery.min.2.1.4.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="/src/js/common.js"></script>
<script src="/src/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="/src/js/enlargeImg.js"></script>
<script>
    var materialConfirmVue = new Vue({
        el: '#materialConfirmVue',
        data:function() {
            return {
                choosedList: [],
                showModal: false,
                showInfoModal: false,
                fabricType1: ['主唛', '洗水唛', '吊牌', '胶带', '包装箱', '不干胶',
                    '皮标', '饰件'],
                fabricType2: ['印花', '绣花'],
                isType: 0,//材料类型 1：['主唛','洗水唛','吊牌','胶带','包装箱','不干胶','皮标','饰件'
                //2：'印花','绣花' ；3：其他
                selectedTabList: [],
                materialInfoList: [
                    {
                        id: '001',
                        title: '大身料',
                        price: '0.10',
                        img: '/src/images/5c3dc53e2383b939a34cdb10f114a3e5.jpg',
                        desc: '质量好，花色美',
                        chooseThis: false,
                        chooseMsg: '点击选择',
                        type: '大身料'
                    },

                    {
                        id: '005',
                        title: '吊牌',
                        price: '0.10',
                        img: '/src/images/5c3dc53e2383b939a34cdb10f114a3e5.jpg',
                        desc: '质量好，花色美',
                        chooseThis: false,
                        chooseMsg: '点击选择',
                        type: '吊牌'
                    },
                    {
                        id: '005',
                        title: '印花',
                        price: '0.10',
                        img: '/src/images/5c3dc53e2383b939a34cdb10f114a3e5.jpg',
                        desc: '质量好，花色美',
                        chooseThis: false,
                        chooseMsg: '点击选择',
                        type: '印花'
                    },
                    {
                        id: '005',
                        title: '纽扣',
                        price: '0.10',
                        img: '/src/images/5c3dc53e2383b939a34cdb10f114a3e5.jpg',
                        desc: '质量好，花色美',
                        chooseThis: false,
                        chooseMsg: '点击选择',
                        type: '纽扣'
                    },


                ]
            }
        },
        methods: {
            //确认选择
            chooseMaterial: function () {
                // 显示模态框
                this.showModal = true;
            },

            // 查看详情
            showDetial:function(type) {
                if (this.fabricType1.indexOf(type) > -1) {
                    this.isType = 1;
                } else if (this.fabricType2.indexOf(type) > -1) {
                    this.isType = 2;
                } else {
                    this.isType = 3;
                }
                $('#infoModal').modal('show')
            },
            // 进入下一步
            goNext:function() {
                this.showModal = false;
                // this.$router.push('/makeTemplate');
                $('#myModal').modal('hide')
                window.location.href = "makeTemplate.html"
            }
            , closeInfo:function() {
                $('#infoModal').modal('hide')
            }
        },
        mounted: function () {

        }
    })




    // 图片放大功能
    // 放大镜的功能
    var leftone = document.getElementById('bigPic');
    
	var rightone = document.getElementById('enlargePane');
	var box = document.getElementById('box');
	var rimg = rightone.getElementsByTagName("img")[0];
	// Event是获取事件对象，对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态,envet是windows的一个属性。
	// 放大镜实现方法（获取右边图片定位）
	function getPosition(e){  //这里的参数e就是代表event
		//首先我们要去判断事件源,获取事件源,也就是e
        var e=e||window.event;   //实现兼容
        //理解：
        //这个表达式写全是这样：var e=event?event||window.event;
        //如果存在event,那么var e=event;而如果不存在event，那么var e=window.event.那么可以看出确实能实现兼容
		var top = e.clientY-leftone.offsetTop-box.offsetHeight/2; //计算小图容器里的鼠标坐标(要减去最外层的偏移)
        var left = e.clientX-leftone.offsetLeft-box.offsetWidth/2;
        // console.log(box.offsetHeight+'--'+box.offsetWidth);
		//理解：
		//e.clientY:返回事件触发时鼠标相对于元素视口的Y坐标。
		//e.clientX:返回事件触发时鼠标相对于元素视口的X坐标。
		//这里的元素视口实际上代指就是浏览器，clientX是鼠标距离浏览器左边框的距离，clientY是鼠标距离浏览器上边框的距离。
		//offsetTop获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置。这里就是左边的div相对于body即浏览器窗口的纵向距离
		//offsetLeft获取对象相对于版面或由offsetLeft属性指定的父坐标的计算顶端位置。这里就是左边的div相对于body即浏览器窗口的纵横向距离
		//offsetHeight是对象的可见高度。这里是指小滑块的高度
		//offsetWidth是对象的可见宽度。这里是指小滑块的宽度
		//这里为什么除以2?是因为我们不除以2的话,事件源也就是鼠标就在这个小滑块的的右下角,并不美观
        //我们要让鼠标位于滑块的中心,所以宽高各减去一半

        //边界判断
        var maxtop = leftone.offsetHeight - box.offsetHeight; //获取小滑块最大纵向移动距离
        var maxleft = leftone.offsetWidth - box.offsetWidth;  //获取小滑块最大横向移动距离
        var mintop = 0;  //获取小滑块最小纵向移动距离
        var minleft = 0;  //获取小滑块最大纵向移动距离
        var mvtop;  //定义小滑块的纵向移动距离
        var mvleft;  //定义小滑块的横向移动距离
        // 判断
       	if (top<mintop) {  
       		box.style.top = mintop + "px";  
            mvtop = mintop;  
            //理解：
            //top是鼠标到浏览器的垂直距离-左边div顶部到浏览器的垂直距离-小滑块的高度的一半。那么现在鼠标在小滑块的中心，也就是说，top就等于小滑块的顶部到左边div的垂直距离
            //那么，如果top<0,就是说小滑块和左边div顶部重合，就让小滑块的top值为0，即鼠标继续向上移动，小滑块不在移动，从而让小滑块的移动范围不能超过左边div的宽高范围
            //下方同理
       	}else if(top>maxtop){  
            box.style.top = maxtop + "px";  
            mvtop = maxtop;  
            //如果top>maxtop,就是说小滑块和左边div底部重合，就让小滑块的top值为maxtop，即鼠标继续向下移动，小滑块不在移动，从而让小滑块的移动范围不能超过左边div的宽高范围
        }else{  
            box.style.top = top + "px";  
            mvtop = top; 
            //不超过边界，则小滑块的垂直移动距离就等于top,即小滑块的顶部到左边div的垂直距离 
        }  
        if(left<minleft){  
            box.style.left = minleft + "px";  
            mvleft = minleft  
        }else if(left>maxleft){  
            box.style.left = maxleft + "px";  
            mvleft = maxleft  
        }else{  
            box.style.left = left + "px";  
            mvleft = left;  
        }  
        //因为右边div的图片是左边div的图片的两倍,而左边div和右边div都是小滑块的宽高的两倍，而要让右边div放大左边的小滑块的包围图片，所以右边大图的定位坐标是小滑块的两倍，这样才能进行映射
        //右侧图片跟着运动:左侧小滑块移动多少，右侧跟着移动他的2倍即可     
        rimg.style.top = -mvtop*2 + "px";
        rimg.style.left = -mvleft*2+ "px";
	}

	// 左侧盒子鼠标移入，小滑块和右侧图片显示,衔接鼠标移动效果
	//onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡。
	//该事件通常与 onmouseleave 事件一同使用。
	// leftone.onmouseenter = function(e){
	// 	var e=e||window.event; //判断事件源
	// 	box.style.display = "block";  
    //     getPosition(e);  
    //     rightone.style.display = "block";   
	// }

	//鼠标移动效果
	leftone.onmousemove = function(e){
		var e=e||window.event; //判断事件源
		box.style.display = "block";  
        getPosition(e);   
		rightone.style.display = "block"; 
	}

	//鼠标移出效果
	leftone.onmouseleave = function(e){
		var e=e||window.event; //判断事件源 
        box.style.display = "none";  
        rightone.style.display = "none";  
	}
</script>